import React, { useEffect, useState } from 'react'
import { Button, Select, Form, Input, DatePicker, message } from 'antd';
import moment from 'moment'
import axios from 'axios';
import { Addlog, manageLost } from "../service"

const SendCardForm = ({ selectedKeys, List, TotalList, AuthorizationList, BindingList }) => {

    const [form] = Form.useForm()
    const [cardno, setcardno] = useState(null)
    const [Selectlist, setSelectlist] = useState([])
    useEffect(() => {
        // console.log("变化", AuthorizationList)
        if (selectedKeys == "总卡") {
            setcardno(TotalList[0].card_name)
            form.setFieldsValue({
                name: TotalList[0].card_number,
                Number: TotalList[0].loss_number
            })
        }
        if (selectedKeys == "授权卡") {
            setcardno(AuthorizationList[0].card_name)
            console.log("授权卡 ->", AuthorizationList)
            form.setFieldsValue({
                name: AuthorizationList[0].card_number,
                Number: AuthorizationList[0].loss_number
            })
        }
        if (selectedKeys == "绑定卡") {
            setcardno(BindingList[0].card_name)
            form.setFieldsValue({
                name: BindingList[0].card_number,
                Number: BindingList[0].loss_number
            })
        }
        setSelectlist(List)

    }, [List])

    const onFinish = values => {
        console.log(values.Number)
        send(values)
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };


    const LostSend = () => {
        form.validateFields().then(values => {
            console.log(values)
            manageLost(values.name).then(res => {
                console.log(res.data)
                if (res.code == 0) {
                    message.success("挂失成功")
                    form.setFieldsValue({
                        Number: res.data
                    })
                    send({ ...values, Number: res.data })
                } else {
                    message.error(res.msg)

                }
            })
        })
    }

    const send = (Card) => {


        let Client = JSON.parse(localStorage.getItem("securityMsg"))
        let res = {
            "guashihao": Card.Number.toString(), "cardno": Card.name.toString(), "clientid": Client.ID, "endtime": moment
                (Card.date._d)
                .unix()
                .valueOf().toString()
        }
        axios({
            url: "http://127.0.0.1:8989/datasnap/rest/TServerMethods1/GSSetmangerclasscard",
            method: "post",
            data: JSON.stringify(res),
            headers: {
                "Content-Type": 'application/x-www-form-urlencoded;charset=utf-8',
                "Accept": "application/json"
            }
        }).then(res => {
            console.log(res)
            if (res.result == 0) {
                message.success("发卡成功")
                let data = {
                    "card_id": res.cardid,
                    "card_name": cardno,
                    "card_number": Card.name,
                    "created_by": localStorage.getItem("username"),
                    "description": Card.description,
                    "holder_name": Card.username,
                    "loss_number": Card.Number,
                    "validity": moment(Card.date._d).format("YYYY-MM-DD HH:mm:ss")
                }
                Addlog(data)
                form.setFieldsValue({
                    username: ""
                })
            } else {
                message.error("发卡失败")

            }

        }).catch(err => {
            message.error("发卡失败")
        })


    }
    return (
        <>

            <div style={{ fontSize: 24, fontWeight: 550, margin: 20 }}>{selectedKeys}</div>
            <br />
            <div style={{ position: "absolute", top: 40, right: 30 }}> <Button type="danger" style={{ marginRight: 10 }} onClick={() => LostSend()}>
                挂失发卡
            </Button></div>
            <Form
                name="basi  c"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600, position: "relative" }}

                onFinish={onFinish}
                onFinishFailed={onFinishFailed}

                form={form}
            >
                <Form.Item
                    label="卡名称"
                    name="name"

                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Select
                        options={Selectlist}
                        onChange={(value) => {
                            console.log("变化", value, TotalList)
                            if (selectedKeys == "总卡") {
                                let find = TotalList.find(item => item.card_number == value)

                                form.setFieldsValue({
                                    Number: find.loss_number
                                })
                                setcardno(find.card_name)
                            }
                            if (selectedKeys == "授权卡") {
                                let find = AuthorizationList.find(item => item.card_number == value)
                                form.setFieldsValue({
                                    Number: find.lost_number
                                })
                                setcardno(find.card_name)
                            }
                            if (selectedKeys == "绑定卡") {
                                let find = BindingList.find(item => item.card_number == value)
                                form.setFieldsValue({
                                    Number: find.lost_number
                                })
                                setcardno(find.card_name)
                            }
                        }}
                    ></Select>
                </Form.Item>

                <Form.Item
                    label="挂失编号"
                    name="Number"
                    rules={[{ required: true, message: '请输入挂失编号' }]}


                >
                    <Input disabled={true} placeholder='输入挂失编号' />
                    {/* <Select
                        disabled={true}
                        options={list2}
                    ></Select> */}
                </Form.Item>

                <Form.Item
                    label="持有人"
                    name="username"

                    rules={[{ required: true, message: '请输入持有人' }]}
                >
                    <Input placeholder='输入持有人' />
                </Form.Item>

                <Form.Item
                    label="有效期时间"
                    name="date"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                    initialValue={moment().add(7, 'days')}
                >
                    <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" style={{ width: "400px" }} />
                </Form.Item>
                <Form.Item
                    label="卡备注"
                    name="description"

                >
                    <Input placeholder='输入备注' />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>

                    <Button type="primary" htmlType="submit">
                        发卡
                    </Button>
                </Form.Item>
            </Form>
        </>
    )
}


export default SendCardForm;